<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 原子管理</el-breadcrumb-item>
                <el-breadcrumb-item>原子类型</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="like.value" placeholder="请输入原子类型名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getList">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="add">添加类型</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-dialog title="添加原子类型" :visible.sync="dialogInfo.dialogFormVisible" :close-on-click-modal='false'>
            <el-form :model="dialogInfo.form" :rules="rules" ref="dialogInfo.form" label-width="110px">
                <el-form-item label="原子类型名称" prop="name">
                    <el-input v-model="dialogInfo.form.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogInfo.dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrEditSubmit('dialogInfo.form')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="confirmDialogInfo.confirmDialogVisible" width="30%">
            <p>确定删除<span style="color: #11b95c;font-weight: bold;">{{confirmDialogInfo.deleteInfo.name}}</span>吗？</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="confirmDialogInfo.confirmDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteItem()">确 定</el-button>
            </span>
        </el-dialog>

        <el-table :data="tableData" height="660" border style="width: 100%" :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d'}">
            <template v-for="item in headObj">
                <template v-if="item.fixed">
                    <el-table-column :prop="item.prop" :label="item.label" fixed align="center" :min-width="item.width" :formatter="timeFormatter"></el-table-column>
                </template>
                <template v-else>
                    <el-table-column :prop="item.prop" :label="item.label" align="center" :min-width="item.width" :formatter="timeFormatter"></el-table-column>
                </template>
            </template>
            <el-table-column label="操作" align="center" min-width="150">
                <template slot-scope="scope">
                    <el-button @click="handleEditClick(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDeleteClick(scope.$index, scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
            	background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[30, 100, 500, 1000, 5000, 10000]"
                :page-size="pageNumb"
                layout="sizes, prev, pager, next"
                :total="totalNum">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import NProgress from "nprogress";
import api from "../../api/api";
import util from "../../common/util";
import xlsx from "xlsx";

export default {
  data() {
    return {
      headObj: [],
      filters: [
        {
          type: "1",
          key: "status",
          value: 1
        }
      ],
      like: {
        key: "name",
        value: ""
      },
      dialogInfo: {
        dialogFormVisible: false,
        form: {
          name: "",
          id: ""
        }
      },
      confirmDialogInfo: {
        confirmDialogVisible: false,
        deleteInfo: {
          id: "",
          name: ""
        }
      },
      currentPage: 1,
      pageNumb: 30,
      totalNum: 0,
      listLoading: false,
      tableData: [],
		rules: {
          	name: [
	            { required: true, message: '请输入原子类型名称', trigger: 'change' },
          	]
 		}
    };
  },
  methods: {
    timeFormatter(row, column) {
      switch (column.property) {
        case "update_time":
          return util.formatDate.format(
            new Date(row[column.property]),
            "yyyy-MM-dd hh:mm:ss"
          );
        case "create_time":
          return util.formatDate.format(
            new Date(row[column.property]),
            "yyyy-MM-dd hh:mm:ss"
          );
        default:
          return row[column.property];
          break;
      }
    },
    handleSizeChange(val) {
      this.pageNumb = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    timeChange() {
      this.getList();
    },
    add() {
      this.dialogInfo.form = {
        name: "",
        id: ""
      };

      this.dialogInfo.dialogFormVisible = true;
    },
    //获取用户列表
    getList() {
      let para = {
        currentPage: this.currentPage - 1,
        pageNumb: this.pageNumb,
        wheres: JSON.stringify(this.filters),
        like: JSON.stringify(this.like),
        order: "id",
        orderType: "desc",
        tableName: "atom_category"
      };
      this.listLoading = true;
      NProgress.start();
      let that = this;
      api
        .getList(para)
        .then(res => {
          if (res.ret == 0) {
            that.totalNum = res.data.totleNumb;
            that.tableData = res.data.dataList;
            that.tableData.forEach(item => {
              	item.statusStr = item.status == 0 ? "无效" : "有效";
            });
            that.listLoading = false;
            NProgress.done();
          }
        })
        .catch(e => {
          that.$message({
            type: "error",
            message: "获取用户列表失败,请刷新重试"
          });
        });
    },
    //添加更新
    addOrEditSubmit(formName) {
    	this.$refs[formName].validate((valid) => {
          	if (valid) {
		      	let para = {
			        form: this.dialogInfo.form,
			        tableName: "atom_category"
		      	};
		      	this.listLoading = true;
		      	NProgress.start();
		      	let that = this;
		      	api.addOrEditSubmit(para).then(res => {
		          	if (res.ret == 0) {
			            NProgress.done();
			            that.$message({ type: "success", message: "添加或者更新原子类型成功！" });
			            that.dialogInfo.dialogFormVisible = false;
			            that.getList();
		          	}
		        }).catch(e => {
		          	that.$message({ type: "error", message: "添加或者更新原子类型失败！" });
		        });
	      	} else {
	            console.log('error submit!!');
	            return false;
	      	}
      	})
    },
    handleEditClick(index, row) {
      this.dialogInfo.form = row;
      this.dialogInfo.dialogFormVisible = true;
    },
    handleDeleteClick(index, row) {
      	this.$confirm("此操作将删除该记录, 是否继续?", "提示", {
	        confirmButtonText: "确定",
	        cancelButtonText: "取消",
	        type: "warning"
      	}).then(() => {
	        api.delete({
	            tableName: "atom_category",
	            id: row.id
	     	}).then(res => {
	            if (res.ret == 0) {
	              	this.$message({ type: "success", message: "删除成功!" });
	              	this.getList();
	            }
	      	})
      	}).catch(() => {
          	this.$message({ type: 'info', message: '已取消删除' });          
        });
    },
    deleteItem() {
      this.confirmDialogInfo.deleteInfo.status = 0;
      let para = {
        form: this.confirmDialogInfo.deleteInfo,
        tableName: "atom_category"
      };
      this.listLoading = true;
      NProgress.start();
      let that = this;
      api
        .addOrEditSubmit(para)
        .then(res => {
          if (res.ret == 0) {
            NProgress.done();
            that.$message({
              type: "success",
              message: "删除原子类型成功！"
            });
            that.confirmDialogInfo.confirmDialogVisible = false;
            that.getList();
          }
        })
        .catch(e => {
          that.$message({
            type: "error",
            message: "删除原子类型失败！"
          });
          that.confirmDialogInfo.confirmDialogVisible = false;
        });
    }
  },
  mounted() {
    this.headObj = [
      {
        prop: "id",
        label: "id",
        width: "80",
        formatter: ""
      },
      {
        prop: "name",
        label: "类型名",
        width: "200",
        formatter: "",
        fixed: false
      },
      {
        prop: "create_time",
        label: "添加时间",
        width: "200",
        fixed: false
      },
      {
        prop: "update_time",
        label: "更新时间",
        width: "200",
        fixed: false
      },
      {
        prop: "statusStr",
        label: "状态",
        width: "90",
        fixed: false
      }
    ];
    this.getList();
  }
};
</script>
